<template>
    <div class="app-container overview">
        <div class="content-item">
            <div class="title">历史数据统计</div>
            <el-row :gutter="60">
                <el-col :span="8">
                    <div class="row-content">
                        <div class="head">
                            <div class="name">历史成交交易额</div>
                            <div class="val">{{history.historicalTurnover}}USDT</div>
                        </div>
                        <div class="footer">
                            <div class="footer-l">
                                <span class="name">买入成交额</span>
                                <span class="val">{{history.purchaseTurnover}}USDT</span>
                            </div>
                            <div class="footer-r">
                                <span class="name">卖出成交额</span>
                                <span class="val">{{history.sellingTurnover}}USDT</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="row-content">
                        <div class="head">
                            <div class="name">历史订单数</div>
                            <div class="val">{{history.historyOrderNum}}笔</div>
                        </div>
                        <div class="footer">
                            <div class="footer-l">
                                <span class="name">买入订单数</span>
                                <span class="val">{{history.buyOrderNum}}笔</span>
                            </div>
                            <div class="footer-r">
                                <span class="name">卖出订单数</span>
                                <span class="val">{{history.sellOrderNum}}笔</span>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="row-content">
                        <div class="head">
                            <div class="name">历史注册人数</div>
                            <div class="val">{{history.historicalRegistration}}人</div>
                        </div>
                        <div class="footer">
                            <div class="footer-l">
                                <span class="name">已实名</span>
                                <span class="val">{{history.realName}}人</span>
                            </div>
                            <div class="footer-r">
                                <span class="name">未实名</span>
                                <span class="val">{{history.unnamed}}人</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="content-item">
            <div class="title">待处理事件</div>
            <el-row :gutter="60">
                <el-col :span="6">
                    <div class="row-content event">
                        <div class="head">
                            <span class="name">自动实名审核失败</span>
                        </div>
                        <div class="footer-r">
                            <span class="val">{{events.auditFailure}}</span>
                        </div>
                    </div>
                </el-col>
                <!-- <el-col :span="6">
                    <div class="row-content event">
                        <div class="head">
                            <span class="name">上币申请</span>
                        </div>
                        <div class="footer-r">
                            <span class="val">{{events.applyListing}}</span>
                        </div>
                    </div>
                </el-col> -->
                <el-col :span="6">
                    <div class="row-content event">
                        <div class="head">
                            <span class="name">充值待处理（大额）</span>
                        </div>
                        <div class="footer-r">
                            <span class="val">{{events.rechargePending}}</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="row-content event">
                        <div class="head">
                            <span class="name">提现待处理</span>
                        </div>
                        <div class="footer-r">
                            <span class="val">{{events.withdrawalPending}}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="content-item">
            <div class="title">数据可视化显示</div>
            <div class="views">
                <div id="main" style="width:70%;height:350px;backgroundColor:'pink'; margin-bottom: 20px"></div>
                <div>
                    <el-select v-model="selectVal" @change="change" placeholder="请选择">
                        <el-option
                        v-for="item in timeTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <div class="content-item">
            <div class="title">财务统计</div>
            <el-row :gutter="100">
                <el-col :span="6">
                    <div class="row-content financia">
                        <div class="head">
                            <span class="name">运营钱包数量</span>
                        </div>
                        <div class="footer">
                            <span class="val">{{financia.operatingWalletsAmount}}USDT</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="row-content financia">
                        <div class="head">
                            <span class="name">财务钱包数量</span>
                        </div>
                        <div class="footer">
                            <span class="val">{{financia.financialWalletsAmount}}USDT</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="row-content financia">
                        <div class="head">
                            <span class="name">第三方平台数量</span>
                        </div>
                        <div class="footer">
                            <span class="val">{{financia.thirdPartyPlatformsAmount}}USDT</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="row-content financia">
                        <div class="head">
                            <span class="name">公会平台币数量</span>
                        </div>
                        <div class="footer">
                            <span class="val">{{financia.guildPlatformCoinsAmount}}USDT</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="platform">平台盈利（手续费）：{{financia.platformProfit}}USDT</div>
        </div>
    </div>
</template>

<script>
import {historicalStatistics, pendingEvents, dataVisualization, financialStatistics} from "@/api/home/overview"
import echarts from 'echarts'
export default {
    name: "Overview",
    data() {
        return {
            history: {},
            events: {},
            // dataview: {},
            financia: {},
            timeTypes: [
                {
                    label: "年",
                    value: "years"
                },
                {
                    label: "月",
                    value: "months"
                },
                {
                    label: "周",
                    value: "weeks"
                },
                {
                    label: "日",
                    value: "days"
                }
            ],
            timeSelectObj: {
                years: ['2010年', '2011年', '2012年', '2013年', '2014年', '2015年', '2016年', "2017年", "2018年", '2019年', '2020年', '2021年', '2022年', '2023年', '2024年', '2025年', '2026年', "2027年", "2028年", '2029年', '2030年'],
                months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                weeks: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 ,21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
            },
            selectVal: "weeks",
            option : {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['平台交易额', '平台订单量', '平台注册量', '平台实名量', '申请公会量']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [],
            },
        }
    },
    mounted() {
        this.getHistory()
        this.getEvents()
        this.getDataView("weeks")
        this.getFinancialStatistics()
        this.myChart = echarts.init(document.getElementById("main"));
        
    },
    methods: {
        // 获取历史数据统计
        getHistory() {
            historicalStatistics().then(res => {
                this.history = res.result
            }).catch(err => {

            })
        },
        // 获取待处理事件
        getEvents() {
            pendingEvents().then(res => {
                this.events = res.result
            }).catch(err => {

            })
        },
        // 获取数据可视化显示
        getDataView(type) {
            dataVisualization().then(res => {
                let result = res.result
                const list = []
                list.push({
                    data: result.platformTransactionVolumes,
                    type: 'line',
                    name: '平台交易额',
                })
                list.push({
                    data: result.platformOrderVolumes,
                    type: 'line',
                    name: '平台订单量',
                })
                list.push({
                    data: result.platformRegistrations,
                    type: 'line',
                    name: '平台注册量',
                })
                list.push({
                    data: result.platformRealNames,
                    type: 'line',
                    name: '平台实名量',
                })
                // 按时间段区分
                this.option.xAxis = [
                    {
                        type: 'category',
                        data: this.timeSelectObj[type]
                    }
                ]
                this.option.series = list
                this.myChart.setOption(this.option);
            }).catch(err => {

            })
        },
        change(val) {
            console.log("val", val)
            this.getDataView(val)
        },
        // 获取财务统计
        getFinancialStatistics() {
            financialStatistics().then(res => {
                this.financia = res.result
            }).catch(err => {

            })
        },
    }
}
</script>

<style lang="scss" scoped>
.overview{
    .content-item{
        .title{
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .views{
            display: flex;
            justify-content: flex-start;
        }
        .el-row{
            min-height: 160px;
            .row-content{
                min-height: 100px;
                text-align: center;
                border-radius: 10px;
                background-color: #d3def2;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
                padding: 10px;
                box-sizing: border-box;
                .name{
                    font-size: 14px;
                    margin-bottom: 10px;
                    color: #25232a;
                }
                .val{
                    font-size: 18px;
                    color: #531a1a;
                }
                .footer{
                    margin-top: 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .footer-l{
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        text-align: center;
                    }
                    .footer-r{
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        text-align: center;
                    }
                }
            }
            .event{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: #eef0d8;
                .head{
                    margin-bottom: 10px;
                }
            }
            .financia{
                border-radius: 0;
                box-shadow: none;
                background-color: #ffffff;
                display: flex;
                flex-direction: column;
                .head{
                    border-radius: 100%;
                    background-color: #0999ee;
                    width: 160px;
                    height: 160px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .name{
                        color: #ffffff;
                    }
                }
                .footer{
                    max-width: 160px;
                    justify-content: center;
                }
            }
        }
        .platform{
            margin-top: 20px;
        }
    }
}
</style>
